<template>
  <view class="root">
    <view class="top">
      <view class="wrapper">
        <view class="wrapper-item">
          <view class="label-item">国籍</view>
          <view class="content-item">{{ form.nationalityName || "" }}</view>
        </view>
        <view class="wrapper-item">
          <view class="label-item">证件类型</view>
          <view class="content-item">{{ form.idTypeName || "" }}</view>
        </view>
        <view class="wrapper-item">
          <view class="label-item">证件照片</view>
          <view class="content-item look-text"
            @click="pvwImage([imgPrefix + form.idCardImage, imgPrefix + form.idCardImageBack])"
            v-if="form.idCardImageBack">
            查看
          </view>
          <view class="content-item" v-else>暂无</view>
        </view>
        <view class="wrapper-item">
          <view class="label-item">证件号码</view>
          <view class="content-item">{{ form.idcard || "" }}</view>
        </view>
        <view class="wrapper-item">
          <view class="label-item">姓名</view>
          <view class="content-item">{{ form.userName || "" }}</view>
        </view>
        <view class="wrapper-item">
          <view class="label-item">民族</view>
          <view class="content-item">{{ form.nationName || "" }}</view>
        </view>
        <view class="wrapper-item">
          <view class="label-item">手机号</view>
          <view class="content-item">{{ form.mobile || "" }}</view>
        </view>
      </view>
      <view class="tips-info">
        注意："每位用户仅有一次机会对实名认证信息进行修改，请谨慎操作以确保信息的准确性。"
      </view>

    </view>
    <view class="bottom">
      <u-button text="修改实名认证信息" :custom-style="fullEditButton" @click="handleModify"></u-button>
    </view>
  </view>
</template>




<script>
  import {
    AuthenticationDetail
  } from "@/api/home.js";
  import {
    pvwImage,
    fullEditButton,
    navTo
  } from "@/utils/util.js";

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        form: {},
        errorType: ["none"],
        fullEditButton
      };
    },
    onLoad(options) {
      this.options = options;
    },
    onShow() {
      this.getDetail();
    },
    methods: {
      pvwImage,
      getDetail() {
        AuthenticationDetail().then((res) => {
          if (res.code == 200) {
            this.form = res.result;
          }
        });
      },
      handleModify() {
        navTo({
          url: '/pages/realNameAuthentication/realNameAuthentication',
          params: {
            action: 'edit',
            ...this.form
          }
        })
      }
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    display: flex;
    flex-direction: column;

    .top {
      flex: 1;
      margin: 14rpx 16rpx;
      min-height: 0;
      overflow: auto;


      .wrapper {
        padding: 0 27rpx;
        background: #fff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .wrapper-item {
          height: 107rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1rpx solid #F3F0F0;

          &:last-child {
            border: 0;
          }

          .label-item {
            font-size: 28rpx;
            color: #7F7E83;
            flex-shrink: 0;
            margin-right: 30rpx;
          }

          .content-item {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
          }
        }

        .photo-class {
          width: 90rpx;
          height: 56rpx;
        }
      }
    }

    .tips-info {
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      line-height: 36rpx;
      margin-top: 50rpx;
      padding: 0 44rpx 0 44rpx;
    }

    .look-text {
      color: #2488F5 !important;
    }

    .bottom {
      height: 120rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24rpx;

      /deep/.u-button__text {
        font-weight: bold;
        font-size: 32rpx;
      }
    }

    .inner {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }
</style>